<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP_Websocket聊天室</title>

    <!-- Favicon -->
    <link rel="icon" href="./dist/media/img/favicon.png" type="image/png">

    <!-- Bootstrap Styles -->
    <link rel="stylesheet" href="vendor/bootstrap.css">

    <!-- App styles -->
    <link rel="stylesheet" href="./dist/css/app.min.css">
</head>
<body>

<!-- layout -->
<div class="layout">


    <!-- content -->
    <div class="content">

        <!-- sidebar group -->
        <div class="sidebar-group">

            <!-- Friends sidebar -->
            <div id="friends" class="sidebar active">
                <header>
                    <span>在线人员列表</span>
                    <ul class="list-inline">
                        <li class="list-inline-item">
                            <button type="button" class="btn btn-primary" data-toggle="modal" id="openEntry" data-target="#entryModal">
                                进入聊天室
                            </button>
                        </li>
                    </ul>
                </header>

                <div class="sidebar-body">
                    <ul class="list-group list-group-flush">
<!--                        <li class="list-group-item">-->
<!--                            <div class="users-list-body">-->
<!--                                <div>-->
<!--                                    <h5>在线人员1</h5>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
            <!-- ./ Friends sidebar -->
        </div>
        <!-- ./ sidebar group -->

        <!-- chat -->
        <div class="chat">
            <div class="chat-body">
                <div class="messages">

                </div>
            </div>
            <div class="chat-footer">
                <form>
                    <textarea class="form-control" placeholder="请输入聊天内容"></textarea>
                    <div class="form-buttons">
                        <button class="btn btn-primary" id="sendBtn">
                            <i data-feather="send"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- ./ chat -->


    </div>
    <!-- ./ content -->

</div>
<!-- ./ layout -->

<!-- 输入昵称模态框 -->
<div class="modal fade" id="entryModal" tabindex="-1" role="dialog" aria-labelledby="entryModalLabel"
     aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="entryModalLabel">输入昵称进入聊天室</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="username" class="col-form-label">昵称:</label>
                        <input type="text" class="form-control" id="username">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="entryButton">进入聊天室</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ 输入昵称模态框 -->

<div class="modal" id="messageModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
        </div>
    </div>
</div>

<!-- Bundle -->
<script src="./vendor/jquery-3.3.1.min.js"></script>
<script src="vendor/bootstrap.js"></script>
<script src="./vendor/feather.min.js"></script>


<!-- App scripts -->
<script src="./dist/js/app.min.js"></script>

<!-- Examples -->
<script src="./dist/js/examples.js"></script>

<!-- Websocket处理 -->
<script src="./dist/js/websocket.js"></script>

</body>
</html>